* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
@media screen and (min-width: 320px) {
    .code-wrapper {
        /*display: none!important;*/
        top: 80%;
        left: 50%;
        transform: translateX(-50%);
        height: 20%;
        width: 100%;
    }
    #code {
        width: 100% !important;
    }
    .draw-wrapper {
        top: 0;
        left: 50%;
        width: 100%;
        transform: translateX(-50%);
    }
}
@media screen and (min-width: 768px) {
    .code-wrapper {
        height: 80%;
        top: 10%;
        width: 40%;
        left: 5%;
        transform: translateX(0px);
    }
    #code {
        width: 80%;
    }
    .draw-wrapper {
        top: 10%;
        width: 40%;
        right: 5%;
        transform: translateX(0px);
    }
}
body {
    height: 100vh;
}
.code-wrapper {
    position: absolute;
    border: 1px solid #cfcfcf;
    box-shadow: 5px 5px 5px rgba(207, 207, 207, 0.5);
    border-radius: 10px;
    /*height: 80%;*/
    /*top: 10%;*/
    /*width: 40%;*/
    /*left: 5%;*/
    display: flex;
    justify-content: center;
    align-items: center;
}
#code {
    overflow: auto;
    background-color: #e8e8e8;
    height: 85%;
    /*width: 80%;*/
    padding: 27px;
    border-radius: 10px;
}
.draw-wrapper {
    position: absolute;
    border: 1px solid #cfcfcf;
    box-shadow: 5px 5px 5px rgba(207, 207, 207, 0.5);
    border-radius: 10px;
    height: 80%;
    /*top: 10%;*/
    /*width: 40%;*/
    /*right: 5%;*/
    display: flex;
    align-items: center;
}
.draw {
    position: absolute;
    width: 100%;
    height: 165px;
}